<template>
  <div class="fileManage">
    <basic-container>
      <avue-crud
        :option="staticListOption"
        :data="data"
        @current-change="currentChange"
        @size-change="sizeChange"
        @selection-change="(v) => (selection = v)"
        ref="crud"
        :page.sync="page"
      >
        <template slot="menuLeft">
          <el-upload
            class="upload-wrap"
            style="display: inline-block"
            action="/"
            :http-request="handleHttpRequest"
            multiple
            :limit="3"
            :show-file-list="false"
          >
            <el-button size="small" type="primary">新增</el-button>
          </el-upload>
          <el-button
            size="small"
            :disabled="selection.length === 0"
            type="default"
            @click="delFile"
            >删除
          </el-button>
        </template>
        <template slot="menu" slot-scope="{ row }">
          <el-button type="text" @click="(e) => copyUrl(e, row)">
            复制地址
          </el-button>
          <el-button type="text" @click="deleteRow(row)"> 删除 </el-button>
        </template>
      </avue-crud>
      <uploadFile :fileVisible.sync="visible"></uploadFile>
    </basic-container>
  </div>
</template>
 
<script>
import { copyToClipboard } from "@/util/util";
import * as api from "@/api/fileList/index";

export default {
  name: "staticList",
  inject: ["staticListOption"],
  data() {
    return {
      selection: [],
      page: {
        pageSize: 10,
        currentPage: 1,
        total: 0,
      },
      data: [],
      visible: false,
      loading: false,
    };
  },
  methods: {
    handleHttpRequest(options) {
      const file = options.file;
      // 创建 FormData 对象
      const formData = new FormData();
      // 将文件添加到 FormData 中
      formData.append("file", file);
      api.uploadSource(formData).then((res) => {
        if (res.data && res.data.success) {
          this.$message.success("上传成功！");
          this.getList();
        } else {
          this.$message.success("上传失败！");
        }
      });
    },
    getList() {
      this.loading = true;
      api
        .getSourceList({
          current: this.page.currentPage,
          size: this.page.pageSize,
          ...this.queryForm,
        })
        .then((res) => {
          const { list, totalRows } = res.data.data;
          this.page.total = totalRows;
          this.data = list;
          this.loading = false;
        });
    },
    delData(data) {
      this.$confirm("确定要删除此项吗？", "警告", {
        type: "warning",
      })
        .then(() => {
          api.delSource({ ids: data }).then((res) => {
            this.$message.success("删除成功！");
            this.getList();
          });
        })
        .catch(() => {});
    },
    delFile() {
      if (this.selection.length === 0) {
        this.$message.error("请先选择！");
        return;
      }
      this.$confirm("确定要删除吗？", "警告", {
        type: "warning",
      })
        .then(() => {
          const listData = this.selection.map((row) => row.oid);
          api.delSource({ ids: listData.join(",") }).then((res) => {
            this.$message.success("删除成功！");
            this.getList();
          });
        })
        .catch(() => {});
    },
    deleteRow(row) {
      if (!row.oid) {
        return;
      }
      this.delData(row.oid);
    },

    copyUrl(e, data) {
      copyToClipboard(data.externalLink, e, this.$message);
    },
    currentChange(currentPage) {
      this.page.currentPage = currentPage;
      this.getList();
    },
    sizeChange(pageSize) {
      this.page.pageSize = pageSize;
      this.getList();
    },
  },
  mounted() {
    this.getList();
  },
};
</script>